<template>
  <div
    :style="style"
    :class="['icon-frame',displayIcon]"
  />
</template>
<script>
export default {
  name: 'Icon',
  props: {
    data: {
      type: Object,
      default: null
    },
    default: {
      type: String,
      default: 'fas fa-book-open'
    }
  },
  computed: {
    icon() {
      return this.data &&
        this.data.info &&
        this.data.info.icon &&
        this.data.info.icon.trim()
        ? this.data.info.icon.trim()
        : null
    },
    style() {
      try {
        return this.icon ? {
          backgroundImage: `url(${require(`@assets/image/${this.icon}`)})`
        } : null
      } catch (ex) {
        return null
      }
    },
    displayIcon() {
      return this.style ? '' : (this.icon || this.default)
    }
  }
}
</script>
<style scoped>
.icon-frame {
  flex-grow:1;
  flex-basis:0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  min-width: 1rem;
  min-height: 1rem;
}
</style>
